<template>
    <div style="position: relative;">
        <PageTitle title="订单详情"></PageTitle>
        <div class="detail-card">
            <div class="title">订单信息</div>
            <Row>
                <Col span="8"><div class="cell">订单编号：{{ order.order_sn }}</div></Col>
                <Col span="8"><div class="cell">订单状态：<a>{{ order.status_text }}</a></div></Col>
            </Row>
            <Row>
                <Col span="8"><div class="cell">订单总额：￥{{ order.real_amount }}</a></div></Col>
                <Col span="8"><div class="cell">订单来源：{{ order.order_source_text }}</div></Col>
            </Row>
            <Row :style="{marginTop: '20px'}">
                <Col span="18">
                    <Steps :current="current" size="small">
                        <Step title="已下单" :content="order.created_at"></Step>
                        <Step v-if="order.status != -1" title="已支付" :content="order.pay_time"></Step>
                        <Step v-if="order.status != -1" title="已接单" :content="order.confirm_time"></Step>
                        <Step v-if="order.status != -1" title="已配票" :content="order.ticket_time"></Step>
                        <Step v-if="order.status != -1" title="已发货" :content="order.delivery_time"></Step>
                        <Step v-if="order.status != -1" title="已完成" :content="order.finish_time"></Step>
                        <Step v-if="order.status == -1" title="已取消" :content="order.finish_time"></Step>
                    </Steps>
                </Col>
            </Row>
        </div>
        <div class="detail-card" v-if="order.order_partner">
            <div class="title">商家信息</div>
            <Row>
                <Col span="8"><div class="cell">商家名称：{{ order.partner.name }}</div></Col>
                <Col span="8"><div class="cell">商家单号：{{ order.order_partner.partner_osn }}</div></Col>
                <Col span="8"><div class="cell">订单状态：<a>{{ order.order_partner.status_text }}</a></div></Col>
            </Row>
            <Row>
                <Col span="8"><div class="cell">配票方式：{{ order.order_partner.delivery_type_text }}</div></Col>
                <Col span="8"><div class="cell">委托总额：￥{{ order.order_partner.partner_amount }}</div></Col>
                <Col span="8"><div class="cell">违约金：￥{{ order.order_partner.breach_fee }}</div></Col>
            </Row>
        </div>
        <div class="detail-card">
            <div class="title">观演人信息</div>
            <div class="content">
                <div v-for="item in order.contact_info" :key="item.id">
                    <Tag color="blue">{{ item.name }} <span style="margin: 0 10px">{{ item.type === 1 ? '身份证' : '其他' }}</span> {{ item.number }}</Tag>
                    <Button type="warning" size="small" ghost @click="handleEditContacts(item,order)" style="height: 22px; line-height: 20px;">修改</Button>
                </div>
            </div>
        </div>
        <div class="detail-card">
            <div class="title">
                <span>收票信息</span>
                <a @click="handleEditAddress(order)">修改</a>
            </div>
            <div class="content">
                <div class="cell">姓名：{{ order.buyer_name }}</div>
                <div class="cell">手机号：{{ order.phone }}</div>
                <div v-if="order.delivery_type == 2" class="cell">
                    <span>联系地址：{{ order.area_titles }} {{ order.address }}</span>
                </div>
            </div>
        </div>

        <Table :columns="skuColumns" :data="skuInfo" border size="small"></Table>

        <Modal
            title="观演人编辑"
            v-model="editContactsModal"
            :width="420"
        >
            <Form ref="contactsForm" :model="contactsForm" :rules="contactsRules" :label-width="84">
                <FormItem label="姓名" prop="name">
                    <Input v-model="contactsForm.name" placeholder="请填写姓名" style="width:300px"></Input>
                </FormItem>
                <FormItem label="类型" prop="type" required>
                    <RadioGroup v-model="contactsForm.type">
                        <Radio :label="1">身份证</Radio>
                        <Radio :label="2">护照</Radio>
                        <Radio :label="3">港澳居民来往内地通行证</Radio>
                        <Radio :label="4">台湾居民来往大陆通行证</Radio>
                        <Radio :label="5">港澳台居民居住证</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="证件号码" prop="number">
                    <Input v-model="contactsForm.number" placeholder="请填写证件号码" style="width:300px"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="editContactsModal = false">关闭</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmitEditContacts">提交</Button>
            </div>
        </Modal>

        <FooterBar>
            <div class="ui-btns">
                <Button style="width: 70px;" @click="handleBack">返回列表</Button>
            </div>
        </FooterBar>
        <Spin size="large" fix v-if="isLoading"></Spin>

        <Modal
            title="收票信息编辑"
            v-model="editAddressModal"
            :width="420"
        >
            <Form ref="addressForm" :model="addressForm" :rules="addressRules" :label-width="84">
                <FormItem label="联系人" prop="buyer_name">
                    <Input v-model="addressForm.buyer_name" placeholder="请填写姓名" style="width:300px"></Input>
                </FormItem>
                <FormItem label="手机号码" prop="phone">
                    <Input v-model="addressForm.phone" placeholder="请填写手机号" style="width:300px"></Input>
                </FormItem>
                <FormItem label="所属地区" v-if="addressForm.delivery_type == 2" prop="area_id">
                    <AreaCascader v-model="addressForm.area_id"></AreaCascader>
                </FormItem>
                <FormItem label="详细地址" v-if="addressForm.delivery_type == 2" prop="address">
                    <Input v-model="addressForm.address" placeholder="请填写详细地址" style="width:300px"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="editAddressModal = false">关闭</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmitEditAddress">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import FooterBar from '@/components/utils/footer-bar.vue';
import AreaCascader from "@/components/form/area-cascader.vue";
export default {
    components: {
        FooterBar,
        AreaCascader,
    },
    data() {
        return {
            submiting: false,
            //编辑收票信息弹窗
            editAddressModal:false,
            addressForm: {
                order_sn: '',
                buyer_name: '',
                phone: '',
                area_id: [],
                address: '',
            },
            addressRules: {
                buyer_name: [
                    {required: true, message: '请填写姓名', trigger: "blur"}
                ],
                phone: [
                    {required: true, message: '请填写手机号', trigger: "blur"}
                ],
                area_id: [
                    {required: true, type: 'array', message: "请选择所在地区", trigger: "change"}
                ],
                address: [
                    {required: true, message: '请填写详细地址', trigger: "blur"}
                ],
            },
            //编辑观演人弹窗
            editContactsModal:false,
            contactsForm: {
                id: 0,
                name: '',
                type: 1,
                number: '',
            },
            contactsRules: {
                name: [
                    {required: true, message: '请填写姓名', trigger: "blur"}
                ],
                type: [
                    {required: true, type: 'number', message: "请选择证件类型", trigger: "change"}
                ],
                number: [
                    {required: true, message: '请填写证件号码', trigger: "blur"}
                ],
            },
            isLoading: false,
            order: {
                order_partner: {},
                partner: {},
                user: {},
                contact_info: [],
            },
            current: 0,
            skuInfo: [],
            skuColumns: [
                {
                    title: '项目名称',
                    minWidth: 170,
                    render: (h, params) => {
                        return h('span', params.row.project_name);
                    }
                },
                {
                    title: '场次和票档',
                    minWidth: 240,
                    render: (h, params) => {
                        return h('span', params.row.concert_name + ' ' + params.row.sku_name);
                    }
                },
                {
                    title: '票面价',
                    key: 'sku_price'
                },
                {
                    title: '商家价',
                    render: (h, params) => {
                        return h("span", {}, params.row.order_partner ? params.row.order_partner.partner_sku_price : params.row.partner_sku_price);
                    }
                },
                {
                    title: '数量',
                    key: 'number'
                },
                {
                    title: '票品总额',
                    minWidth: 50,
                    render: (h, params) => {
                        return h("span", {}, params.row.order_partner ? params.row.order_partner.partner_sku_amount : params.row.partner_sku_amount);
                    }
                },
                {
                    title: '拆单费',
                    minWidth: 50,
                    render: (h, params) => {
                        return h("span", {}, params.row.order_partner ? params.row.order_partner.partner_split_fee : params.row.partner_split_fee);
                    }
                },
                {
                    title: '服务费',
                    render: (h, params) => {
                        return h("span", {}, params.row.platform_fee);
                    }
                }
            ],
        }
    },
    mounted() {
        if(this.$route.query.order_sn) {
            this.handleGetDetail(this.$route.query.order_sn);
        }
    },
    methods: {
        handleGetDetail(order_sn) {
            this.isLoading = true;
            this.$ajax.get('/order/detail',{params:{order_sn: order_sn}}).then(res=>{
                this.order = res;
                this.skuInfo = [res];
                this.current = res.status != 99 ? res.status : 5;
                this.isLoading = false;
            }).catch(err => {
                this.$Message.error(err.message || '加载详情失败');
            })
        },
        // 取消
        handleBack() {
            this.$router.back();
        },
        //修改观演人
        handleEditContacts(item,order){
            this.contactsForm.order_sn = order.order_sn;
            this.contactsForm.id = item.id;
            this.contactsForm.name = item.name;
            this.contactsForm.type = item.type;
            this.contactsForm.number = item.number;
            this.editContactsModal = true;
        },
        handleSubmitEditContacts(){
            if(this.submiting) return false;
            this.$refs.contactsForm.validate((valid) => {
                if(valid) {
                    let params = {
                        order_sn: this.contactsForm.order_sn,
                        id: this.contactsForm.id,
                        name: this.contactsForm.name,
                        type: this.contactsForm.type,
                        number: this.contactsForm.number
                    }
                    this.submiting = true;
                    const msg = this.$Message.loading({
                        content: '正在提交',
                        duration: 0
                    });
                    this.$ajax.post('/order/change_contact', params).then((res) => {
                        msg();
                        this.submiting = false;
                        this.$Message.success('操作成功');
                        this.editContactsModal = false;
                        this.order.contact_info = res;
                    }).catch(err => {
                        msg();
                        this.submiting = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            })
        },
        //修改收票信息
        handleEditAddress(order){
            this.addressForm.order_sn = order.order_sn;
            this.addressForm.buyer_name = order.buyer_name;
            this.addressForm.phone = order.phone;
            this.addressForm.delivery_type = order.delivery_type;
            this.addressForm.area_id = order.area_ids || [];
            this.addressForm.address = order.address;
            this.editAddressModal = true;
        },
        handleSubmitEditAddress(){
            if(this.submiting) return false;
            this.$refs.addressForm.validate((valid) => {
                if(valid) {
                    let params = {
                        order_sn: this.addressForm.order_sn,
                        buyer_name: this.addressForm.buyer_name,
                        phone: this.addressForm.phone
                    }
                    if (this.addressForm.delivery_type == 2){
                        params.area_id = this.addressForm.area_id[this.addressForm.area_id.length - 1];
                        params.address = this.addressForm.address;
                    }
                    this.submiting = true;
                    const msg = this.$Message.loading({
                        content: '正在提交',
                        duration: 0
                    });
                    this.$ajax.post('/order/change_info', params).then((res) => {
                        msg();
                        this.submiting = false;
                        this.$Message.success('操作成功');
                        this.editAddressModal = false;
                        this.order.buyer_name = res.buyer_name;
                        this.order.phone = res.phone;
                        this.order.area_ids = res.area_ids;
                        this.order.area_titles = res.area_titles;
                        this.order.address = res.address;
                    }).catch(err => {
                        msg();
                        this.submiting = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.detail-card {
    margin-bottom: 20px;
    .title {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bold;
    }
    .cell {
        font-size: 13px;
        line-height: 24px;
    }
}
</style>